<template>
  <div class="custom-filter">
    <template v-if="['select','selects'].includes(filterType)">
      <el-select v-model="value" filterable clearable :multiple="filterType == 'selects'" collapse-tags placeholder="" @change="handleChange">
        <el-option v-for="opt in options" :key="opt.value||opt.code" :label="opt.label||opt.description" :value="opt.value||opt.code"></el-option>
      </el-select>
    </template>
    <template v-else-if="filterType == 'date'">
      <el-date-picker v-model="value" type="date" placeholder="" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" @change="handleChange">
      </el-date-picker>
    </template>
    <template v-else-if="filterType == 'daterange'">
      <el-date-picker v-model="value" type="daterange"  unlink-panels range-separator="-" start-placeholder="" end-placeholder="" :picker-options="pickerOptions1" value-format="yyyy-MM-dd" @change="handleChange">
      </el-date-picker>
    </template>
    <template v-else-if="filterType == 'input'">
      <el-input v-model.trim="value" clearable placeholder="" @change="handleChange"></el-input>
    </template>
    <template v-else-if="filterType == 'action'">
      <el-button v-bind="btnConfig" @click="handleHeadBtn()">{{btnConfig.label}}</el-button>
    </template>
  </div>
</template>

<script>
import bus from "@/bus/bus";

export default {
  name: "TableFilter",
  data(){
    return {
      value:null,
      options:[],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: this.$t('app.today'),
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text:  this.$t('app.lastday'),
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: this.$t('app.lastweek'),
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      pickerOptions1:{
        shortcuts: [{
          text: this.$t('app.lastweek'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: this.$t('app.lastmonth'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: this.$t('app.lastquarter'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  mounted(){
    // if(['3','5'].includes(this.filterType)){
    //   this.value = []
    // }
    if(['select','selects'].includes(this.filterType)){
      if(this.params.column.colDef.options){
        this.options = this.params.column.colDef.options
      }
      bus.$on('filterParamChange',column => {
        if(column.prop == this.params.props.prop){
          this.options = column.options
        }
      });
    }
    bus.$on('resetFliterParams',() => {
      this.value = null;
    })
  },
  computed:{
    filterType(){
      return this.params?.props?.input||'input';
    },
    btnConfig(){
      return this.params?.props?.headBtn
    }
  },
  methods: {
    handleChange(){
      const prop = this.params.filterParams.colDef.field;
      // bus.$emit('handleFliterChange',{filter:this.value,key:prop});
      this.params.context.componentParent.filterChangeHandler({filter:this.value,key:prop})
    },
    handleHeadBtn(){
      this.params.context.componentParent.actionEvent("head-btn-click")
    }
  },
};
</script>

<style lang="scss">
.custom-filter{
  width: 100%;
  .el-select{
    overflow: hidden;
    .el-select__tags{
      flex-wrap: nowrap;
    }
    .el-tag{
      height: auto;
      line-height: 100%;
    }
  }
}
</style>
